/**
 * 夜班限时签到设置
 * @author levy
 */
(function( lf, r) {
    var ajax = lf.utils.ajax,
        log = lf.utils.log,
        RC = r.createClass;


    //展现的设置
    var Clock = RC({
        edit: function (e) {
            //log('edit ');
            this.props.editSetting(e,'');
        },
        componentDidMount: function(){
            var radio = r.findDOMNode(this.refs.radio);
            radio.addEventListener('touchend', function (e) {
                lf.utils.stopBubble(e);

                var node = $(e.target);
                if(node.hasClass('mui-switch-handle'))
                    node = node.parent();

                node.siblings().toggleClass('inactive');

            });
        },
        render: function () {
            var data = this.props.data;

            var intervals = data.interval.split(',').map(function (inverval) {
                return <span>{inverval}</span>;
            });

            //<li className="index gray-bg font44">第{data.index}次</li>
            return (
                    <li onTouchEnd={this.edit} className="mui-table-view-cell ">
                        <a data-index={data.index} className="mui-navigate-right">
                            <p className="time">{data.time}</p>
                            <p className="interval font48">
                                {intervals}
                            </p>
                            <div ref="radio" className="mui-switch mui-active">
                                <div className="mui-switch-handle"></div>
                            </div>
                        </a>
                    </li>
            );
        }
    });

    var Body = RC({
        getInitialState: function () {
            return ({
                mock:[
                    {
                        index:'1',
                        time:'01:00',
                        interval:'每天',
                    },
                    {
                        index:'2',
                        time:'02:00',
                        interval:'工作日',
                    },
                    {
                        index:'3',
                        time:'03:00',
                        interval:'周一,周二,周三,周四,周六,周日',
                    }
                ],
                clockList:[],
                settingVisible:'none',
                footBtn:[],
                footBtnBelong:'',
            });
        },
        componentWillMount: function () {

        },
        clockRender: function(data){
            return <Clock data={data} editSetting={this.editSetting}/>
        },
        editSetting: function () {
            window.location.href = "sign_in_setting_edit.html";
        },
        render: function () {
            var list = this.state.clockList,
                me = this;
            //mock data
            if(!list.length){
                list = this.state.mock.map(function(data){
                    return <Clock data={data} editSetting={me.editSetting}/>
                });
                this.state.clockList = list;
                //log(this.state.clockList);
            }

            //<button ref="addSettingBtn" onTouchEnd={this.editSetting} className="ele-center add-setting">继续添加</button>
            return (
                <ul className="sign-in-setting-list lf-list mui-table-view ">
                    {list}
                </ul>
            )
        }
    });

    r.render(
			<Body />,
			document.getElementById('root'),function(){
        }
	)

})( liefeng, React)
